<template>
           <CardBox title="文章详情" icon="function/Information.png" :refresh="null" >
                  <div slot="body" class="content">
                    
                      <button class="infoOne flex">
                        <div class="font">作者:</div>
                        <div class="font" @click="toPersonal(ArticleDetail.createdUid)"> {{ArticleDetail.username}} </div>
                     </button>

                    <button class="infoOne flex">
                        <div class="font">类型:</div>
                        <div class="font"> {{ArticleDetail?.type | articleType}} </div>
                     </button>
                       <button class="infoOne flex">
                        <div class="font">状态:</div>
                        <div class="font" v-if="ArticleDetail.articleState == 1"> 正常 </div>
                        <div class="font" v-else-if="ArticleDetail.articleState == 0"> 审核中 </div>
                        <div class="font" v-else> 违规 </div>
                     </button>

                       <button class="infoOne flex">
                        <div class="font">对谁可见:</div>
                        <div class="font" v-if="ArticleDetail.viewed == 1"> 公开 </div>
                        <div class="font" v-else-if="ArticleDetail.viewed == 2"> 朋友可见 </div>
                        <div class="font" v-else-if="ArticleDetail.viewed == 3"> 部分可见 </div>
                        <div class="font" v-else> 私密 </div>
                     </button>
                     
                     <button class="infoOne flex">
                        <div class="font">点赞数:</div>
                        <div class="font">{{ArticleDetail?.extra?.likecount | count('information') }}</div>
                     </button>

                     
                     <button class="infoOne flex">
                        <div class="font">收藏数:</div>
                        <div class="font">{{ArticleDetail?.extra?.collectcount | count('information')}}</div>
                     </button>

                     <button class="infoOne flex">
                        <div class="font">评论数:</div>
                        <div class="font">{{ArticleDetail?.extra?.discusscount | count('information') }}</div>
                     </button>

                     
                     <button class="infoOne flex">
                        <div class="font">阅读量:</div>
                        <div class="font">{{ArticleDetail?.extra?.readcount | count('information')}}</div>
                     </button> 
<!-- 
                       <button class="infoOne flex">
                        <div class="font">热度:</div>
                        <div class="font">{{ArticleDetail?.hot | count('information')}}</div>
                     </button>  -->

                     <!-- <button class="infoOne flex">
                        <div class="font">最近更新:</div>
                        <div class="font">{{ArticleDetail?.updateTime | time}}</div>
                     </button>  -->
                  </div>
             </CardBox>

</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import { mapState } from 'vuex'
  export default 
  {
  components: { CardBox },
     methods: {
        toPersonal(uid){
            this.$public.ToPersonal(uid)
        },

     },
     computed:{
        ...mapState('ArticleDetail',['ArticleDetail']),
     },
    
  }
</script>
<style scoped lang='less'>
 

//共有的 矢量图标
.icon{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
//公共的 统一字体
.font{
  font-size: 18px;
}
//内容 图标
.con_icon{
    width: 18px;
    height: 18px;
}
.content{
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
}
.infoOne{
   width: 100%;
   justify-content: space-between;
   margin-bottom: 5px;
   color: var(--fontColor);

}


</style>